import React from "react";
import { toolsListT } from "../index";
import { directiveEnum } from "../../index";
import classNames from "classnames";
import _EE_ from "../../EventEmitter";
import "./index.less";
type propsTypes = {
  penItem?: toolsListT[];
  directive?: directiveEnum;
  className?: string;
};

function SubTool({ penItem = [], directive, className = "" }: propsTypes) {
  function handleToolItem(e: any, item: toolsListT) {
    e.stopPropagation();
    if (directive !== item.type) {
      _EE_.emit("_set_directive", item.type);
    }
  }

  return (
    <div className={`${className}`}>
      {penItem.map((item, key) => (
        <div
          key={key}
          className={classNames("subpen-item", { subActive: directive === item.type })}
          onClick={(e) => handleToolItem(e, item)}
        >
          <img src={item.icon} />
        </div>
      ))}
    </div>
  );
}

export default SubTool;
